<template>
	<view class="goods_detail pb_85">
		<view class="goods_img_wrap" style="position: relative;">
			<u-swiper :list="dataInfo.rotateImagesUrlList" height="750rpx" circular @change="handleChangeSwiper"
				@click="handleClickSwiper" :indicatorStyle="indicatorStyle" :autoplay="true">
				<view slot="indicator" class="indicator">
					<view slot="indicator" class="indicator-num">
						<text
							class="indicator-num__text fx aic jcc lh_21 pl_8 pr_8 fz_12">{{ currentNum + 1 }}/{{ dataInfo.rotateImagesUrlList&&dataInfo.rotateImagesUrlList.length?dataInfo.rotateImagesUrlList.length:1 }}</text>
					</view>
				</view>
			</u-swiper>

			<view class="commodityDIYbut" :style="DIYStyle" @click="commodityDIY" v-if="commodityDIYdiyUrl">
				<image style="height: 30rpx;width: 30rpx;margin-top: 10rpx;" src="/static/images/Frame.png"></image>
				<div style="margin-left: 8rpx; font-size: 24rpx;">DIY商品</div>
			</view>
			<view class="pa plr_3 l_92 b_48" v-if="dataInfo.integra&&isActGoods"
				style="background: #D70000; text-align: center; color: #fff; font-size: 24rpx; height: 38rpx; line-height: 38rpx; border-radius: 100rpx; margin: 0 auto;">
				可得{{dataInfo.integra}}积分
			</view>
			<view class="act_goods_wrap pa b_0 l_0 w100 zi_10 fx" v-if="isActGoods&&goodsType==4">
				<view class="fx_1 asstr fx fc_fff pl_14 aic">
					<text class="fz_16 fb">劲爆价：</text>
					<text class="fz_26 fb">￥{{salePrice}}</text>
					<view class="pl_20 fz_10">
						<view class="p_2 fc_primary br_2" style="background: #FDE0B2;">
							立省 {{savePrice}}
						</view>
						<view class="fc_fff">
							已售 {{saleNum}}
						</view>
					</view>
				</view>
				<view class="width_90 fx_sh asstr fx_col aic jcc fz_12 fc_fff">
					<text>限时抢购</text>
					<text>正品保证</text>
				</view>
			</view>
			<view class="act_goods_wrap pa b_0 l_0 w100 zi_10 fx" v-if="isActGoods&&goodsType==3">
				<view class="fx_1 asstr fx fc_fff pl_14 aic">
					<text class="fz_16 fb">最低砍价：</text>
					<text class="fz_26 fb">￥{{salePrice}}</text>
					<view class="pl_20 fz_10">
						<view class="p_2 fc_primary br_2" style="background: #FDE0B2;">
							立省 {{savePrice}}
						</view>
						<view class="fc_fff">
							零售价 {{dataInfo.originalPrice}}
						</view>
					</view>
				</view>
				<view class="width_90 fx_sh asstr fx_col aic jcc fz_24 fb fc_fff">
					砍
				</view>
			</view>
			<view class="act_goods_wrap pa b_0 l_0 w100 zi_10 fx" style="background: #E62129;"
				v-if="isActGoods&&goodsType==5">
				<view class="fx_1 asstr fx fc_fff pl_14 aic">
					<text class="fz_16 fb">拼团价：</text>
					<text class="fz_26 fb">￥{{salePrice}}</text>
					<view class="pl_20 fz_10">
						<view class="p_2 fc_primary br_2" style="background: #FDE0B2;">
							立省 {{savePrice}}
						</view>
						<view class="fc_fff">
							零售价 {{dataInfo.originalPrice}}
						</view>
					</view>
				</view>
				<view class="width_140 fx_sh asstr fx aic jcc fz_10 fc_fff">
					发起多人拼团>>>拼满发货
				</view>
			</view>
			<view class="act_goods_wrap pa b_0 l_0 w100 zi_10 fx" v-if="isActGoods&&goodsType==2">
				<view class="fx_1 asstr fx fc_fff pl_14 aic">
					<text class="fz_26 fb">￥{{salePrice}}</text>
					<view class="pl_20 fz_10">
						<view class="p_2 fc_primary br_2" style="background: #FDE0B2;">
							立省 {{savePrice}}
						</view>
						<view class="fc_fff">
							零售价 {{dataInfo.originalPrice}}
						</view>
					</view>
				</view>
				<view class="width_90 fx_sh asstr fx_col aic jcc fz_10 fc_fff">
					<text class="fz_16">限时抢购></text>
					<view class="mt_2 time_count_box" v-if="dataInfo.activitiesStatus==3">
						<u-count-down :time="$utils.getFullTime(dataInfo.seckillBeginTime)-new Date().getTime()"
							:format="$utils.getCountdownformat($utils.getFullTime(dataInfo.seckillBeginTime) - new Date().getTime())"
							@finish="handleRefresh"></u-count-down>
						<text>开始</text>
					</view>
					<view class="mt_2 fx jcc aic top_countdown time_count_box" v-if="dataInfo.activitiesStatus==1">
						<u-count-down :time="$utils.getFullTime(dataInfo.seckillEndTime)-new Date().getTime()"
							:format="$utils.getCountdownformat($utils.getFullTime(dataInfo.seckillEndTime)-new Date().getTime())"
							@finish="handleRefresh"></u-count-down> 结束
					</view>
				</view>
			</view>
		</view>
		<view class="goods_info cell">
			<view class="fx aic" v-if="!isActGoods">
				<view class="fc_zhured fx aib" v-if="appType==base.ADMIN_TYPE">
					<view v-if="goodsType == 6">
						<text class="fz_23 fb fc_zhured">{{dataInfo.integra||0}}积分</text>
						<text class="fz_14 pb_10">+ ¥</text>
						<text class="fz_23 fb fc_zhured">{{salePrice}}</text>
					</view>
					<view v-else>
						<text class="fz_14 pb_10">￥</text>
						<text class="fz_23 fb fc_zhured">{{salePrice}}</text>
					</view>
				</view>
				<template v-else>
					<view class="fc_zhured" v-if="goodsType == 6">
						<text class="fz_23 fb fc_zhured">{{dataInfo.integra||0}}积分</text>
						<text class="fz_14 pb_10">+ ¥</text>
						<text class="fz_23 fb fc_zhured">{{salePrice}}</text>
					</view>
					<view class="fc_zhured" v-else-if="goodsType>1">
						<text class="fz_14 pb_10">￥</text>
						<text class="fz_23 fb fc_zhured">{{salePrice}}</text>
					</view>
					<view class="fc_zhured fx aib" v-else-if="userInfo.memberLevel>1" @longpress="handleCheckPrice">
						<text class="fz_14 pb_10">会员折后价￥</text>
						<text class="fz_23 fb fc_zhured">{{dataInfo.vipPrice||0}}</text>
					</view>
					<view class="fx aic" @longpress="handleCheckPrice" v-else>
						<view class="fc_zhured fx aib">
							<text class="fz_14 pb_10">￥</text>
							<text class="fz_23 fb fc_zhured">{{dataInfo.salePrice||0}}</text>
						</view>
						<view class="tip fz_12 fc_fff lh_26 height_26 plr_10 br_4 ml_8">
							会员:¥{{dataInfo.vipPrice||0}}
						</view>
					</view>
				</template>
				<view class="fr" v-if="goodsType!=6">
					<view class="point lh_16 pl_7 pr_7 fc_fff br_18 fz_10 ib">
						可得积分:{{dataInfo.integra}}
					</view>
					<!-- 秒杀进度 -->
					<view class="progress fx aic jce mt_8" v-if="goodsType==2&&dataInfo.activitiesStatus==1">
						<u-line-progress :percentage="dataInfo.seckillSchedule||0" activeColor="#ff0000"
							:showText="false"></u-line-progress><text
							class="ml_4">{{dataInfo.seckillSchedule||0}}%</text>
					</view>
				</view>
			</view>
			<view class="mt_8 pr fx aic w100" v-if="appType==base.USER_TYPE">
				<image class="w100 height_44" src="@/static/images/vip_bg1.png" mode=""></image>
				<view class="pa l_12 fx aic zi_1" style="color:#757894">
					<view class="width_25 height_25 flow_h br50 mr_8 pr bo_1">
						<image class="square-image" :src="dealInfo.logo" mode="aspectFit"></image>
					</view>
					<text class="fx_1 fe ptb_2 plr_8 br_4 mr_12"
						style="background: #D0D8E7;color:#757894;">{{ dealInfo.showName }}</text>
					<text class="" style="color:#757894;">100%正品</text>
				</view>
			</view>
			<view class="fx fx_nw fz_12 fc_999 mt_10">
				<view style="width: 33.33%;">
					销量： {{saleNum}}
				</view>
				<view class="fc" style="width: 33.33%;">
					零售价：<text class="flt">{{dataInfo.originalPrice||0}}</text>
				</view>
				<view class="fr" style="width: 33.33%;" v-if="dataInfo.isShowStock">
					库存：{{stock||0}}
				</view>
			</view>
			<!-- 团购 -->
			<view class="fb fz_18 mt_12 lh_21">
				<text class="tag lh_21 plr_4 fz_12 fc_fff bc_r mr_4 ib br_2"
					v-if="dataInfo.openGroup">{{dataInfo.openGroup}}人团</text>
				{{dataInfo.productName||''}}
			</view>
			<view class="fx aic jcb fc_999 fz_12 mt_16">
				<view class="fx aic jcc pl_24 pr_24" @click="handlePermis('handleOpenContact')">
					<uni-icons class="mr_4" color="#999999" custom-prefix="iconfont" type="icon-kefu"
						size="32rpx"></uni-icons>
					<view class="lh_32">客服</view>
				</view>
				<view class="fx aic jcc pl_24 pr_24" @click="handlePermis('handleCollect')">
					<uni-icons class="mr_4" :color="isCollect?'#FE5A1C':'#999999'" custom-prefix="iconfont"
						:type="isCollect?'icon-star-color':'icon-star-empty'" size="32rpx"></uni-icons>
					<view class="lh_32">收藏</view>
				</view>
				<view class="fx aic jcc pl_24 pr_24" @click="handleShare">
					<uni-icons class="mr_4" color="#999999" custom-prefix="iconfont" type="icon-fenxiang"
						size="32rpx"></uni-icons>
					<view class="lh_32">分享</view>
				</view>
			</view>


		</view>
		<view class="mt_8 bc_fff" v-if="goodsType==5">
			<view class="fz_16 fb plr_16 pt_12 pb_8" v-if="dataInfo.groupNumber">
				{{dataInfo.groupNumber||0}}人拼团中，快来一起拼~
			</view>
			<view class="plr_15 ptb_12 fx aic jcb" v-for="item,index in groupRecordVoList" :key="index">
				<view class="fx aic fx_1 fx fx_nw flow_h">
					<CusImage shape="circle" width="64rpx" height="64rpx" radius="32rpx" :src="item.customerHeadUrl" />
					<text class="fb ml_8 fx_1 fe">{{item.customerName||''}}</text>
				</view>
				<view class="fx aic fz_12">
					<view class="fc plr_12">
						<view>
							还差<text class="fc_primary">{{(item.maxPlayers||0)-(item.participantsNumber||0)}}人</text>拼团
						</view>
						<view class="mt_2 gourp_count_down">
							<u-count-down :time="new Date(item.endTime).getTime() - new Date().getTime()"
								:format="$utils.getCountdownformat(new Date(item.endTime).getTime() - new Date().getTime())"
								v-if="item.endTime"></u-count-down>
						</view>
					</view>
					<navigator hover-class="none" :url="`/pages/goods/pages/group_info?id=${item.id}`"
						v-if="item.isGroup">
						<button class="custom_btn lh_32 plr_14 fz_12 fc_fff bc_primary br_16">查看拼团</button>
					</navigator>
					<button class="custom_btn lh_32 plr_14 fz_12 fc_fff bc_primary br_16"
						@click="handlePermis('handleOpenGroup', item)" v-else>参与拼团</button>
				</view>
			</view>
		</view>
		<view class="mt_8 bc_fff fz_14 pt_6 pb_6 pl_16 pr_16">
			<view class="fx fx_nw pt_6 pb_6">
				<view class="fc_999 fx_1 pr_8">
					选择
				</view>
				<view class="fx_4 fe fx aic jcb w100" @click="handleOpenGoodsWindow('')">
					<view class="fx_1">
						已选：{{specification}}
					</view>
					<view class="fx aic fx_sh">
						<view class="fz_12 fc_999">
							共{{$utils.numberToChinese(dataInfo.ruleInfoVoList.length)}}款
						</view>
						<u-icon name="arrow-right" color="#333" size="22rpx"></u-icon>
					</view>
				</view>
			</view>
			<!-- <view class="fx fx_nw pt_6 pb_6" v-if="dataInfo.ruleInfoVoList&&dataInfo.ruleInfoVoList.length"
				@click="handleOpenGoodsWindow('')">
				<view class="fx fx_nw fx_1 mr_24 grid_8 flow_h">
					<image class="width_68 height_48 fx_sh" :src="item" v-for="item,index in specificatImgs"
						:key="index"></image>
				</view>
				<view class="fx aic">
					<view class="fz_12 fc_999">
						共{{$utils.numberToChinese(dataInfo.ruleInfoVoList.length)}}款
					</view>
					<u-icon name="arrow-right" color="#333" size="22rpx"></u-icon>
				</view>
			</view> -->
			<view class="fx fx_nw pt_6 pb_6">
				<view class="fc_999 fx_1 pr_8">
					品牌
				</view>
				<view class="fx_4">{{dataInfo.brandName||''}}</view>
			</view>
			<view class="fx fx_nw pt_6 pb_6">
				<view class="fc_999 fx_1 pr_8">
					风格
				</view>
				<view class="fx_4">{{dataInfo.styleName||''}}</view>
			</view>
			<template v-if="goodsType!=6">
				<view class="fx fx_nw pt_6 pb_6">
					<view class="fc_999 fx_1 pr_8">
						送至
					</view>
					<view class="fx_4 fx fx_nw" @click="handlePermis('handleAddAddress')"><uni-icons class="mr_4"
							custom-prefix="iconfont" type="icon-dingwei" color="#E6502C"
							size="32rpx"></uni-icons>{{addressStr}}</view>
				</view>
				<template v-if="!dataInfo.isVip">
					<view class="fx fx_nw pt_6 pb_6">
						<view class="fc_999 fx_1 pr_8">
							配送费
						</view>
						<view class="fx_4">{{zeroPrice(useDeliveryCost ? deliveryCost : dataInfo.deliveryCost)}}
						</view>
					</view>
					<view class="fx fx_nw pt_6 pb_6">
						<view class="fc_999 fx_1 pr_8">
							安装费
						</view>
						<view class="fx_4">{{zeroPrice(dataInfo.installCost)}}</view>
					</view>
				</template>
			</template>
		</view>
		<view class="mt_8 cell fz_14" v-if="goodsType!=6">
			<view class="fx fx_nw">
				<view class="fc_999 fx_1 pr_8">
					材质
				</view>
				<view class="fx_4">{{dataInfo.materialName||''}}</view>
			</view>
		</view>
		<view class="mt_8 cell fz_14" v-if="goodsType!=6">
			<view class="fx fx_nw">
				<view class="fc_999 fx_1 pr_8">
					服务
				</view>
				<view class="fx_4 pl_20 fx aic jcb">
					<view class="fx aic">
						<uni-icons class="mr_4" custom-prefix="iconfont" type="icon-baozhang-1" color="#F08519"
							size="32rpx"></uni-icons>正品保障
					</view>
					<view class="fx aic">
						<uni-icons class="mr_4" custom-prefix="iconfont" type="icon-baozhang-2" color="#F08519"
							size="32rpx"></uni-icons>极速发货
					</view>
					<view class="fx aic">
						<uni-icons class="mr_4" custom-prefix="iconfont" type="icon-baozhang-3" color="#F08519"
							size="32rpx"></uni-icons>售后无忧
					</view>
				</view>
			</view>
		</view>
		<view class="rate_wrap mt_8 mb_8 cell2" v-if="goodsType!=6">
			<view class="fx aic jcb">
				<text class="fb fx_16">用户评价（{{dataInfo.evaluateNum||0}}条）</text>
				<view class="fx aic fz_12" @click="handlePermis('handleEvaluate')">
					<text class="fc_999 mr_4">{{dataInfo.goodEvaluateNum||0}}%好评率</text>
					<u-icon name="arrow-right" color="#333" size="22rpx"
						v-if="evaluateList&&evaluateList.length"></u-icon>
				</view>
			</view>
			<Evaluate v-for="item,index in evaluateList" :key="index" :data="item" />
		</view>
		<u-sticky>
			<view class="bc_fff tabs_wrap">
				<Tabs :activeIndex="tabActiveIndex" :tabData="['商品详情', '规格参数', '服务保障']" @tabClick="handleClickTab" />
			</view>
		</u-sticky>
		<view class="mt_8 cell lh_16" id="tab-0">
			<rich-text @click.stop="showPreview($event)" :nodes="formatRichText(dataInfo.details)"></rich-text>
		</view>
		<view class="mt_8 cell" id="tab-1">
			规格参数
		</view>
		<block>
			<view class="pt_8 pb_4 pl_16 pr_16 fz_12 fc_999">
				基本信息
			</view>
			<view class="cell">
				<view class="fx fx_nw pt_3 pb_6">
					<view class="fc_999 fx_2 pr_8">
						型号
					</view>
					<view class="fx_3">{{dataInfo.model||''}}</view>
				</view>
				<view class="fx fx_nw pt_3 pb_6">
					<view class="fc_999 fx_2 pr_8">
						产地
					</view>
					<view class="fx_3">{{dataInfo.producingArea||''}}</view>
				</view>
				<view class="fx fx_nw pt_3 pb_6">
					<view class="fc_999 fx_2 pr_8">
						包装件数
					</view>
					<view class="fx_3">{{dataInfo.numberPackages||''}}</view>
				</view>
				<view class="fx fx_nw pt_3 pb_6">
					<view class="fc_999 fx_2 pr_8">
						包装体积（m³）
					</view>
					<view class="fx_3">{{dataInfo.volumePackages||''}}</view>
				</view>
				<view class="fx fx_nw pt_3 pb_6">
					<view class="fc_999 fx_2 pr_8">
						发货周期
					</view>
					<view class="fx_3">{{dataInfo.deliverCycle||''}}</view>
				</view>
			</view>

		</block>
		<template v-for="item,index in dataInfo.otherInfoList">
			<view class="pt_8 pb_4 pl_16 pr_16 fz_12 fc_999" :key="index">
				{{item.name||''}}
			</view>
			<view class="cell" v-for="item1,index1 in item.detail" :key="cellKey(index,index1)">
				<view class="fx fx_nw pt_3 pb_6">
					<view class="fc_999 fx_2 pr_8">
						{{item1.key||''}}
					</view>
					<view class="fx_3">{{item1.value||''}}</view>
				</view>
			</view>
		</template>
		<view class="mt_8 cell" id="tab-2">
			<view>
				服务保障
			</view>
			<PreviewRichtext v-if="dataInfo.serviceGuarantee" :richText="formatRichText(dataInfo.serviceGuarantee)">
			</PreviewRichtext>
			<!-- <rich-text @click.stop="showPreview($event)" :nodes="formatRichText(dataInfo.serviceGuarantee)"></rich-text> -->
		</view>
		<!-- <u-back-top :scroll-top="scrollTop" bottom="208" right="36" :z-index="1000">
			<image class="width_48 height_48 box_shadow" src="../../../static/logo.png" mode="aspectFit"></image>
		</u-back-top> -->
		<u-back-top :scroll-top="scrollTop" bottom="208" right="36" :z-index="1000">
			<image class="width_48 height_48 box_shadow br50" :src="ossUrl+'/back_top.png'" mode="aspectFit">
			</image>
		</u-back-top>
		<view class="pf pt_8 plr_16 fx aic jcb bc_fff b_0 l_0 r_0 zbi_50 btn_wrap" v-if="goodsType==1">
			<navigator open-type="switchTab" url="/pages/index/shopping_cart" hover-class="none"
				class="fx fx_col aic jcc">
				<view class="pr">
					<image class="width_24 height_24" src="@/static/images/menu_4.png" mode=""></image>
					<u-badge numberType="overflow" bgColor="#E6502C" max="99" :absolute="true"
						:offset="['-10rpx','-10rpx']" :value="shoppingNum" v-if="shoppingNum"></u-badge>
				</view>
				<view class="fz_12">
					购物车
				</view>
			</navigator>
			<view class="fx aic jcb">
				<button :custom-style="{height: '80rpx'}" class="custom_btn primary width_130 lh_40 br_20 fz_14"
					style="background: linear-gradient(90deg, #FFC700 0%, #FF9800 100%)"
					@click="handleOpenGoodsWindow('shop')">加入购物车</button>
				<button :custom-style="{height: '80rpx'}" class="custom_btn primary width_130 lh_40 br_20 fz_14 ml_16"
					style="background: linear-gradient(90deg, #FA4704 0%, #FE8D00 100%)"
					@click="handleOpenGoodsWindow('buy')">立即购买</button>
			</view>
		</view>
		<view class="pf pt_8 pl_16 pr_16 bc_fff b_0 l_0 r_0 zbi_50 btn_wrap" v-else-if="goodsType==3">
			<u-button :custom-style="{height: '80rpx'}" class="custom_btn_wrap" type="primary" shape="circle"
				@click="handleOpenGoodsWindow('buy')">发起砍价</u-button>
		</view>
		<view class="pf pt_8 pl_16 pr_16 bc_fff b_0 l_0 r_0 zbi_50 btn_wrap" v-else-if="goodsType==5">
			<u-button :custom-style="{height: '80rpx'}" class="custom_btn_wrap" type="primary" shape="circle"
				@click="handlePermis('handleOpenMyGroup')">立即开团</u-button>
		</view>
		<view class="pf pt_8 pl_16 pr_16 bc_fff b_0 l_0 r_0 zbi_50 btn_wrap" v-else-if="goodsType==6">
			<u-button :custom-style="{height: '80rpx'}" class="custom_btn_wrap" type="primary" shape="circle"
				@click="handleOpenGoodsWindow('buy')">立即兑换</u-button>
		</view>
		<view class="pf pt_8 pl_16 pr_16 bc_fff b_0 l_0 r_0 zbi_50 btn_wrap countdown_wrap"
			v-else-if="goodsType==2&&dataInfo.activitiesStatus==3">
			<u-button :custom-style="{height: '80rpx'}" class="custom_btn_wrap" color="#999" type="primary"
				shape="circle"
				disabled>{{$u.timeFormat($utils.getFullTime(dataInfo.seckillBeginTime), 'hh点MM分')}}即将开始，剩余倒计时：
				<u-count-down :time="$utils.getFullTime(dataInfo.seckillBeginTime)-new Date().getTime()"
					:format="$utils.getCountdownformat($utils.getFullTime(dataInfo.seckillBeginTime) - new Date().getTime())"
					@finish="handleRefresh"></u-count-down>
			</u-button>
		</view>
		<view class="pf pt_8 pl_16 pr_16 bc_fff b_0 l_0 r_0 zbi_50 btn_wrap countdown_wrap"
			v-else-if="goodsType==2&&(dataInfo.activitiesStatus==2||dataInfo.activitiesStatus==4)">
			<u-button :custom-style="{height: '80rpx'}" class="custom_btn_wrap" color="#999" type="primary"
				shape="circle" disabled>秒杀已结束
			</u-button>
		</view>
		<view class="pf pt_8 pl_16 pr_16 bc_fff b_0 l_0 r_0 zbi_50 btn_wrap" v-else-if="goodsType==2&&!dataInfo.id">
			<u-button :custom-style="{height: '80rpx'}" class="custom_btn_wrap" color="#999" type="primary"
				shape="circle" disabled>即将开始</u-button>
		</view>
		<view class="pf pt_8 pl_16 pr_16 bc_fff b_0 l_0 r_0 zbi_50 btn_wrap" v-else>
			<u-button :custom-style="{height: '80rpx'}" class="custom_btn_wrap" type="primary" shape="circle"
				@click="handleOpenGoodsWindow('buy')">立即购买</u-button>
		</view>
		<GoodsWindow :num="buyNum" :type="goodsType" :data="dataInfo" :immediatly="changeImmediatly"
			:specType="specType" :visible="goodsPopShow" @close="handleCloseGoodsWindow" @change="handleChangeSpec">
		</GoodsWindow>
		<ShareWindow :data="dataInfo" :type="shareType" :goodsType="goodsType" :params="dataParams" :page="sharePath"
			:visible.sync="sharePopShow" @select="handleShareSelect" />
		<PopupTemplate className="group_popup_container" :visible.sync="groupPopShow"
			:title="`参与${currentGroup.customerName||''}的拼团`">
			<template v-if="currentGroup">
				<view class="mt_16 fc">
					仅剩<text
						class="fc_primary">{{(currentGroup.maxPlayers||0)-(currentGroup.participantsNumber||0)}}</text>个名额，<u-count-down
						:time="new Date(currentGroup.endTime).getTime() - new Date().getTime()"
						:format="$utils.getCountdownformat(new Date(currentGroup.endTime).getTime() - new Date().getTime())"
						v-if="currentGroup.endTime"></u-count-down>后结束
				</view>
				<view class="mt_33 fx fx_nw jcc">
					<view class="width_52 height_52 pr">
						<image class="w100 h100 br50" :src="currentGroup.customerHeadUrl" mode="aspectFit"></image>
						<view class="pa b_0 l_0 r_0 width_32 mlr_auto fc fz_10 fc_fff bc_primary br_13">
							团长
						</view>
					</view>
					<view class="width_52 height_52 pr ml_24">
						<image class="w100 h100 br50" src="@/static/images/empty_icon1.png" mode="aspectFit"></image>
					</view>
				</view>
				<button class="w100 custom_btn primary lh_40 br_27 mt_32 fz_14" @click="handleGroup">参与拼团</button>
			</template>
		</PopupTemplate>
		<PopupVerify :visible.sync="verifyPopShow" @verify="checkPopShow=true" />
		<PopupCheck :visible.sync="checkPopShow" :type="userType" :data="dataInfo" />
		<AddressWindow :data="addressList" :currentId="currentAddress.id||null" :visible.sync="addressPopShow"
			@select="handleSelectAddress" />
		<canvas style="width: 600rpx;height:718rpx;" canvas-id="firstCanvas"></canvas>
		<Modal ref="modal" />
	</view>
</template>

<script>
	import CusImage from '@/components/Image'
	import Tabs from '@/components/Tabs'
	import ShareWindow from '@/components/goods/ShareWindow'
	import GoodsWindow from '@/components/goods/GoodsWindow'
	import Evaluate from '@/components/goods/Evaluate'
	import PopupTemplate from '@/components/PopupTemplate'
	import PopupPreview from '@/components/PopupPreview'
	import PopupVerify from '../components/PopupVerify'
	import PopupCheck from '../components/PopupCheck'
	import AddressWindow from '../components/AddressWindow'
	import PreviewRichtext from '../components/PreviewRichtext.vue'
	import Modal from '@/components/wl-modal/wl-modal'
	import canvasUtils from '@/utils/canvas'
	import share from '@/mixins/share.js'
	import BASE from '@/const/base.js'
	import api from '@/service/config/api.js'
	import {
		mapState,
		mapGetters
	} from 'vuex'
	export default {
		mixins: [share],
		components: {
			CusImage,
			Tabs,
			ShareWindow,
			GoodsWindow,
			PopupTemplate,
			PopupPreview,
			PopupVerify,
			PopupCheck,
			AddressWindow,
			Modal,
			Evaluate,
			PreviewRichtext
		},
		data() {
			return {
				ossUrl: this.$ossUrl,
				base: this.$base,
				currentNum: 0,
				dataInfo: {},
				tabActiveIndex: 0,
				tabsTop: [0, 0, 0], // 详情tab
				scrolling: false, // 是否在滚动中
				timer: null,
				scrollTop: 0,
				goodsPopShow: false, // 规格弹窗
				sharePopShow: false, // 分享弹窗
				groupPopShow: false, // 拼团弹窗
				verifyPopShow: false, // 身份验证弹窗
				checkPopShow: false, // 查看进价弹窗
				addressPopShow: false, // 地址选择弹窗
				id: null,
				goodsType: 1, // 商品类型 1-普通，2-秒杀，3-砍价，4-抢购，5-拼团，6-积分
				shoppingNum: 0, // 购物车数量
				buyNum: 1, // 购买数量
				confirmType: '', // 操作类型 shop 加入购物车 buy 购买
				isCollect: false, // 是否收藏
				userInfo: this.$storage.getItem('basicUnserInfo') || {},
				addressList: [],
				currentAddress: null,
				useDeliveryCost: false, // 使用计算后配送费
				deliveryCost: 0, // 计算后配送费
				evaluateList: [], // 评价列表
				dataParams: {}, // 二维码参数
				groupInfo: null, // 拼团参数
				currentGroup: null, // 当前拼团
				sharePath: '/pages/goods/pages/detail', // 分享连接
				buyType: '', // 购买附加类型
				shareType: 'goods', // 分享类型
				groupPinkId: '', // 参与其他团id
				groupRecordVoList: [], // 拼团列表
				specificatImgs: [], // 规格图片
				integralType: 0,
				changeImmediatly: false,
				specType: 0, //0-选择规格 1-购物车 2-购买
				commodityDIYdiyUrl: '',
				isIntegral: false, // 是否判断积分商品
				initData: false,
			}
		},
		computed: {
			...mapState(['userType', 'appType', 'dealInfo']),
			...mapGetters(['noLogin']),
			addressStr() {
				if (this.currentAddress) {
					return `${this.currentAddress.province}${this.currentAddress.city}${this.currentAddress.district}${this.currentAddress.detail||''}`
				}
				return '北京市东城区安定门街道'
			},
			specification() {
				if (this.dataInfo && this.dataInfo.ruleValue) {
					return JSON.parse(this.dataInfo.ruleValue).map(item => item.value).join(' ')
				}
				return ''
			},
			// 积分价格
			integralPrice() {
				return () => {
					if (this.dataInfo && this.dataInfo.salePrice) {
						return {
							integral: this.$utils.floatMul(this.dataInfo.salePrice || 0, this.$utils.floatMul(0.01,
								this
								.dataInfo.integralPayRatio || 0)),
							price: this.$utils.floatMul(this.dataInfo.salePrice || 0, this.$utils.floatMul(0.01, (100 -
								this
								.dataInfo.integralPayRatio || 0)))
						}
					}
					return {
						integral: 0,
						price: 0
					}
				}
			},
			// 进度
			percentage() {
				return Math.floor((this.dataInfo.sales || 0 / this.dataInfo.stock || 0) * 100)
			},
			cellKey() {
				return (index, index1) => `${index}-${index1}`
			},
			// 销量
			saleNum() {
				let num = this.dataInfo.sales || 0 + this.dataInfo.virtualSales || 0
				return num > 9999 ? '9999+' : num
			},
			formatRichText() {
				return item => this.$utils.formatRichText(item)
			},
			salePrice() {
				if (this.goodsType == 2 || this.goodsType == 4 || this.goodsType == 5) {
					return this.dataInfo.activityPrice || 0
				}
				if (this.goodsType == 3) {
					return this.dataInfo.bargainirgMinPrice || 0
				}
				return this.$store.state.appType === this.$base.USER_TYPE ? (this.dataInfo.salePrice || 0) : (this.dataInfo
					.wholesalePrice ||
					this.dataInfo.salePrice || 0)
			},
			stock() {
				if (this.goodsType == 3) {
					return this.dataInfo.activitiesNumber || 0
				}
				return this.dataInfo.stock || 0
			},
			goodsId() {
				if (this.goodsType == 0 || this.goodsType == 1 || this.goodsType == 6) {
					return this.id
				}
				return this.dataInfo.goodsId || this.id
			},
			checkToken() {
				return !!this.$storage.getItem('token')
			},
			zeroPrice() {
				return data => data ? (data + '元') : this.goodsType == 6 ? '包邮' : '以线下门店为准'
			},
			isActGoods() {
				return this.goodsType > 1 && this.goodsType < 6
			},
			indicatorStyle() {
				return 'right: 20rpx;top: 20rpx;bottom: auto;'
			},
			DIYStyle() {
				return this.isActGoods ? 'bottom: 92rpx;' : ''
			},
			savePrice() {
				return this.$utils.floatSub(this.dataInfo.originalPrice, this.salePrice)
			}
		},
		watch: {
			currentAddress: {
				handler(newVal) {
					if (newVal && newVal.id && this.goodsId) {
						api.post('/order/api/order/computedDeliveryFee', {
							productId: this.goodsId,
							addressId: newVal.id
						}, {
							noToast: true
						}).then(res => {
							this.useDeliveryCost = true
							this.deliveryCost = res.data.totalDeliveryCost
						})
					} else {
						this.useDeliveryCost = false
					}
				},
				deep: true,
				init: true,
			}
		},
		onLoad(options) {
			console.log('1111', options)
			if (this.noLogin) {
				this.$utils.redirectToLogin()
				return
			}
			setTimeout(() => {
				if (!this.dealInfo) {
					this.getDealerInfo()
				}
			}, 100)
			console.log("获取小程序optionsoptions", options)
			if (options.customerId && options.customerId != this.$store.state.userInfo.customerId) {
				this.$storage.setItem('shareId', options.customerId)
			}
			if (options.isIntegral) {
				this.isIntegral = true
			}
			console.log('$options.id', options.id)
			if (options.id || options.scene) {
				if (options.scene) {
					console.log("通过扫码进来的")
					console.log(options.scene)
					const scene = decodeURIComponent(options.scene)
					console.log(scene)
					console.log(222)
					let paramsArr = scene.split("=")
					console.log(paramsArr)
					this.id = paramsArr[1] || '';
					this.goodsType = 1
					if (paramsArr[1]) {
						this.$storage.setItem('shareId', paramsArr[1]);
					}
					console.log("页面的商品id")
					console.log(this.id)
					console.log(this.goodsType)

					// const scene = decodeURIComponent(options.scene)
					// let params = scene.split(',').reduce((result, item) => {
					// 	let parts = item.split(':');
					// 	result[parts[0]] = parts[1];
					// 	return result;
					// }, {});
					// const paramsArr = params.g.split('$');
					// this.id = paramsArr[0] ||'';
					// this.goodsType = paramsArr[2] ||'';
					// if (paramsArr[1])
					// 	this.$storage.setItem('shareId', paramsArr[1]);
				} else {
					this.id = options.id
					this.goodsType = options.goodsType || 1
					this.integralType = options.integralType || 0
				}

				this.getData()
				this.dataParams = {
					id: this.id,
					goodsId: this.goodsId,
					goodsType: this.goodsType,
					...this.$store.state.userInfo.customerId ? {
						customerId: this.$store.state.userInfo.customerId
					} : {},
				}
				if (options.groupPinkId) {
					this.buyType = 'groupPick'
					this.groupPinkId = options.groupPinkId
					this.handleOpenGoodsWindow('buy')
				}
				if (options.groupId) {
					this.handleOpenGoodsWindow('buy')
				}
				this.$utils.getSetting()
			} else {
				this.$utils.showToast('暂无此商品', 1500, 1)
			}
		},
		onShow() {
			if (!this.init && this.checkToken && this.initData)
				this.getAddressList()
			this.userInfo = this.$storage.getItem('basicUnserInfo') || {}
			this.$nextTick(() => {
				setTimeout(() => {
					uni.createSelectorQuery().select(".tabs_wrap").boundingClientRect(
						tabs => { //最外层盒子的节点：类或者id
							this.tabsTop.forEach((item, index) => {
								uni.createSelectorQuery().select(`#tab-${index}`)
									.boundingClientRect(
										data => { //目标位置的节点：类或者id
											this.tabsTop[index] = Math.floor(data.top) - tabs
												.height
											this.$forceUpdate()
										}).exec();
							})
						}).exec()
					//TODO 测试生成海报

					// canvasUtils.PosterCanvas([
					// 	'https://p3.itc.cn/q_70/images03/20211117/1270baf1c2f84fa19a99ef82c52d454c.png',
					// 	'',
					// 	'https://p3.itc.cn/q_70/images03/20211117/1270baf1c2f84fa19a99ef82c52d454c.png'
					// ], '蓝山咖啡和客户复旦复华多少分会计师对方科技大厦饭卡说法刷卡机和健康杀菌东方红郡卡复合机卡哈', '2323', (res) => {
					// 	console.log(res)
					// })
				}, 100)

			})
			this.init = false
		},
		handleRefresh() {
			this.getData(true)
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop
			if (this.scrolling) return
			const index = this.tabsTop.findIndex((item, index) => {
				return !!item && e.scrollTop >= item && (this.tabsTop[index + 1] != undefined ? e.scrollTop <= this
					.tabsTop[index + 1] : true)
			})
			if (index > -1) {
				this.tabActiveIndex = index
			}
		},
		methods: {
			getData(refresh = false) {
				this.commodityDIYdiyUrl = ''
				if (!refresh)
					this.$utils.loading()
				let url = ''
				let url1 = ''
				switch (this.goodsType + '') {
					case '1':
						url = '/goods/api/product/info'
						break
					case '2':
						url = '/goods/api/product/infoSeckill'
						break
					case '3':
						url = '/goods/api/product/infoBargainirg'
						break
					case '4':
						url = '/goods/api/product/infoScramble'
						break
					case '5':
						url = '/goods/api/product/infoGroup'

						url1 = '/goods/api/product/groupUserInfo'
						break
					case '6':
						url = '/goods/api/product/info'
						break
					default:
						url = '/goods/api/product/info'
						break
				}
				api.get(url, {
					id: this.id,
					userType: this.userInfo.identityType || 1,
					...this.$store.state.userInfo.customerId ? {
						customerId: this.$store.state.userInfo.customerId
					} : {},
					appletType: this.$store.state.appType === this.$base.ADMIN_TYPE ? 0 : 1,
					goodsType: this.$utils.goodsTypeReDir(this.goodsType),
				}, {
					noToast: true,
				}).then(res => {
					this.id = res.data.id
					if (this.isIntegral && res.data.isJoinIntegralMall == 1) {
						this.goodsType = 6
					}
					this.initData = true
					this.commodityDIYdiyUrl = res.data.diyUrl
					const otherInfo = res.data.otherInfo ? JSON.parse(res.data.otherInfo) : [];
					if (res.data.ruleInfoVoList && res.data.ruleInfoVoList.length && this.goodsType == 6) {
						res.data.ruleInfoVoList.forEach(item => item.goodsType = 5);
					}
					this.dataInfo = {
						...res.data,
						otherInfo: Array.isArray(otherInfo) ? otherInfo.reduce((arr, item) => {
							if (item.detail) {
								return [...arr, ...item.detail]
							}
							return arr
						}, []) : [],
						rotateImagesPreviewUrlList: res.data.rotateImagesUrlList.map(
							item => this.$utils.getStaticUrl(item)),
						rotateImagesUrlList: res.data.mainVideoUrl ? [res.data.mainVideoUrl, ...
							res.data.rotateImagesUrlList
						].map(item => this.$utils.getStaticUrl(item)) : res.data.rotateImagesUrlList.map(
							item => this.$utils.getStaticUrl(item))
					}
					if (this.checkToken) {
						console.log(999)
						this.getCollection()
					}
					this.$nextTick(() => {
						if (this.checkToken)
							this.getAddressList()
					})
					if (this.checkToken)
						this.getEvaluate()
					this.shareTitle = this.dataInfo.productName
					this.shareImageUrl = this.$utils.getStaticUrl(this.dataInfo.coverImageUrl)
					this.specificatImgs = (res.data.ruleInfoVoList && res.data.ruleInfoVoList.length) ? res.data
						.ruleInfoVoList.map(item => this.$utils.getStaticUrl(item.specificationImageUrl)) : []
					if (url1) {
						api.get(url1, {
							id: this.id,
							...this.$store.state.userInfo.customerId ? {
								customerId: this.$store.state.userInfo.customerId
							} : {},
							userType: this.userInfo.identityType || 1,
						}).then(res => {
							this.groupRecordVoList = res.data
						})
					}
					if (this.$store.state.userInfo.customerId&&this.checkToken) {
						api.post('/goods/api/product/addLookStatistics', {
							productId: this.goodsId || this.id,
							...this.$store.state.userInfo.customerId ? {
								customerId: this.$store.state.userInfo.customerId
							} : {},
							userType: this.userInfo.identityType || 1
						}, {
							noToast: true
						})
					}
				}).catch(err => {
					this.$utils.showToast(err || '商品不存在', 1500, 1)
				})
			},
			getDealerInfo() {
				return new Promise(resolve => {
					api.get('/user/api/user/getDealerInfo', {}, {
						noHideLoading: true
					}).then(res => {
						// uni.setStorageSync("platformInfo", res.data)
						// this.$store.commit('setPlatformInfo', res.data)
						uni.setStorageSync("dealInfo", res.data)
						this.$store.commit('setDealInfo', res.data)
					}).finally(() => {
						resolve()
					})
				})
			},
			getAddressList() {
				api.get('/user/api/UserAddress/list', {}, {
					noToast: true
				}).then(res => {
					this.addressList = res.data
					if (res.data && res.data.length) {
						this.currentAddress = res.data.find(item => item.isDefault)
					}
				})
			},
			// 获取评价列表
			getEvaluate() {
				api.get('/goods/api/productEvaluate/page', {
					size: 1,
					current: 1,
					productId: this.goodsId || this.id
				}, {
					noToast: true,
				}).then(res => {
					if (res.data && res.data && res.data.records) {
						this.evaluateList = res.data.records
					}
				})
				api.get('/goods/api/productEvaluate/data/' + (this.goodsId || this.id), {}, {
					noHideLoading: true
				}).then(res => {
					this.dataInfo.evaluateNum = res.data.allCount
					this.dataInfo.goodEvaluateNum = res.data.goodEvaluateRate
				}).finally(() => {})
			},
			// 查询收藏情况
			getCollection() {
				api.get('/user/api/tMyCollect/productId', {
					productId: this.dataInfo.goodsId || this.id
				}, {
					noToast: true,
					noHideLoading: true,
				}).then(res => {
					console.log('getCollectiongetCollection', res)
					this.isCollect = res.data
				})
			},
			handleChangeSwiper(e) {
				this.currentNum = e.current
			},
			handleClickTab(index) {
				this.scrolling = true
				clearTimeout(this.timer)
				this.timer = setTimeout(() => {
					this.scrolling = false
				}, 500)
				this.tabActiveIndex = index
				//从当前位置到达目标位置
				uni.createSelectorQuery().select(`#tab-${index}`).boundingClientRect(data => { //目标位置的节点：类或者id
					uni.createSelectorQuery().select(".goods_detail").boundingClientRect(res => { //最外层盒子的节点：类或者id
						uni.createSelectorQuery().select(".tabs_wrap").boundingClientRect(
							tabs => { //最外层盒子的节点：类或者id
								uni.pageScrollTo({
									duration: 100, //过渡时间
									scrollTop: data.top - res.top - tabs.height, //到达距离顶部的top值
								})
							}).exec()
					}).exec()
				}).exec();
			},
			handleShare() {
				this.sharePath = '/pages/goods/pages/detail'
				this.dataParams = {
					id: this.id,
					goodsId: this.goodsId,
					goodsType: this.goodsType,


					...this.$store.state.userInfo.customerId ? {

						customerId: this.$store.state.userInfo.customerId

					} : {},
				}
				this.shareType = 'goods'
				this.sharePopShow = true
			},
			handleShareSelect(type) {
				// if (type) {
				// 	api.post('/goods/api/product/addShareStatistics', {
				// 		productId: this.goodsId || this.id,
				// 		
				// ...this.$store.state.userInfo.customerId ? {
				// 	customerId: this.$store.state.userInfo.customerId
				// } : {},
				// 		userType: this.userInfo.identityType || 1
				// 	}, {
				// 		noToast: true,
				// 	})
				// }
				switch (type) {
					case 'circle':
						wx.downloadFile({
							url: 'https://res.wx.qq.com/wxdoc/dist/assets/img/demo.ef5c5bef.jpg',
							success: (res) => {
								wx.showShareImageMenu({
									path: res.tempFilePath
								})
							}
						})
						break;
					default:
						break;
				}
			},
			// 关闭规格选择弹窗
			handleCloseGoodsWindow(current, num, confirm) {
				this.buyNum = num
				if (this.confirmType && confirm) {
					if (current && current.id) {
						this.goodsType = this.goodsType == 6 ? 6 : current.goodsType != undefined ? this.$utils
							.goodsTypeDir(
								current.goodsType) : (this
								.goodsType * 1)
						console.log('current', current, this.goodsType)
						this.id = (this.goodsType > 1 && this.goodsType < 6) ? current.activityId : current.id
					}
					this.$nextTick(() => {
						// 加入购物车
						if (this.confirmType == 'shop') {
							this.handleShop()
						}
						// 购买
						if (this.confirmType == 'buy') {
							this.handleBuy()
						}
					})
				} else if (current && current.id && current.id != this.id && confirm) {
					this.goodsPopShow = false
					this.goodsType = this.goodsType == 6 ? 6 : current.goodsType != undefined ? this.$utils.goodsTypeDir(
						current.goodsType) : (this
						.goodsType * 1)
					this.id = (this.goodsType > 1 && this.goodsType < 6) ? current.activityId : current.id
					this.getData()
				} else {
					this.goodsPopShow = false
				}
			},
			// 更换规格
			handleChangeSpec(current) {
				if (this.$utils.goodsTypeDir(current.goodsType)) {}
				this.goodsType = this.goodsType == 6 ? 6 : current.goodsType != undefined ? this.$utils.goodsTypeDir(
					current.goodsType) : (this
					.goodsType * 1)
				console.log(9999, current.goodsType, this.goodsType)
				this.id = (this.goodsType > 1 && this.goodsType < 6) ? current.activityId : current.id
				this.getData()
			},
			handleOpenGoodsWindow(type) {
				// if (this.goodsType == 3) {
				// 	return this.$utils.permis(false).then(() => this.bargain())
				// }
				if (type == 'shop') {
					this.specType = 1
				} else if (!type) {
					this.specType = 0
				} else {
					this.specType = 2
				}
				if (type) {
					this.changeImmediatly = true
				} else {
					this.changeImmediatly = false
				}
				this.confirmType = type
				this.goodsPopShow = true
			},
			// 砍价
			bargain() {
				this.$utils.loading()
				api.get('/marketing/web/api/backstage/bargainirgGoodsConf/addBargainirg/' + this.id).then(res => {
					this.sharePath = '/pages/goods/pages/bargain_info'
					this.$set(this.dataParams, 'id', res.data.id)
					this.$set(this.dataParams, 'customerId', this.$store.state.userInfo.customerId)
					this.shareTitle = '您的好友邀请您砍一刀'
					this.shareType = 'bargain'
					this.sharePopShow = true
				})
			},
			buy(type) {
				this.$utils.loading()
				const {
					brandId,
					integra
				} = this.dataInfo
				api.post('/order/api/order/preOrder', {
					preOrderType: this.goodsType,
					...this.currentAddress ? {
						addressId: this.currentAddress.id
					} : {},
					productDetails: [{
						buyNum: this.buyNum,
						brandId: brandId,
						integral: integra,
						...((this.goodsType == 1 || this.goodsType == 6) ? {
							productId: this.id,
						} : {}),
						...((this.buyType == 'groupPick' && this.goodsType == 5) ? {
							pinkId: this.groupPinkId || (this.currentGroup?.groupRecordVoList?.[0]
								?.groupRecordId)
						} : {}),
						...(this.goodsType == 2 ? {
							seckillId: this.id
						} : {}),
						...(this.goodsType == 3 ? {
							bargainId: this.id
						} : {}),
						...(this.goodsType == 4 ? {
							purchaseId: this.id
						} : {}),
						...(!this.buyType && this.goodsType == 5 ? {
							combinationId: this.id
						} : {}),
					}]
				}).then(res => {
					console.log(res)
					if (res.data && res.data.preOrderNo) {
						uni.navigateTo({
							url: `/pages/goods/pages/confirm?order=${res.data.preOrderNo}&addressId=${this.currentAddress?this.currentAddress.id:''}`
						})
					} else {
						this.$utils.showToast('下单失败，请重试')
					}
				}).catch(err => {
					console.log(1111, err)
				})
			},
			handleBuy() {
				this.$utils.permis(false).then(() => {
					switch (this.goodsType.toString()) {
						case '1':
							this.buy()
							break
						case '2':
							this.buy()
							break
						case '3':
							this.bargain()
							break
						case '4':
							this.buy()
							break
						case '5':
							this.buy(this.buyType)
							break
						case '6':
							this.buy()
							break
						default:
							this.buy()
							break
					}
				})

			},
			handleShop() {
				this.$utils.permis(false).then(() => {
					this.$utils.loading()
					api.post('/goods/api/ShoppingCart/addShoppingCart', {
						productNum: this.buyNum,
						productId: this.id
					}).then(res => {
						console.log(res)
						this.$utils.showToast('添加成功')
					})
				})
			},
			handleCollect() {
				this.$utils.loading()
				if (this.isCollect) {
					api.delete('/user/api/tMyCollect/removeByGoodsId', [this.goodsId]).then(res => {
						this.isCollect = false
						this.$utils.showToast(this.isCollect ? '收藏成功!' : '取消收藏')
					})
				} else {
					api.post('/user/api/tMyCollect', {
						goodId: this.goodsId,
					}).then(res => {
						this.isCollect = true
						this.$utils.showToast(this.isCollect ? '收藏成功!' : '取消收藏')
					})
				}
			},
			handleCheckPrice() {
				if ((this.userType == 1 || this.userType == 2 || this.userType == 3) && this.$store.state.appType === this
					.$base.USER_TYPE) {
					if (!this.userInfo.setPassword) {
						uni.showModal({
							title: '提示',
							content: '您还未设置登录密码，请设置后再操作!',
							confirmColor: '#FE5A1C',
							cancelColor: '#999999',
							confirmText: '立即设置',
							cancelText: '暂不设置',
							success: res => {
								if (res.confirm) {
									uni.navigateTo({
										url: '/pages/person/pages/login_password?type=2'
									})
								}
							}
						})
					} else {
						this.verifyPopShow = true
					}
				}
			},
			handleSelectAddress(item) {
				this.currentAddress = item
			},
			commodityDIY() {
				console.log('封面图', this.dataInfo)

				uni.navigateTo({
					url: '/pages/goods/pages/commodityDIY?coverImageUrl=' + this.commodityDIYdiyUrl
				});

			},
			handleOpenContact() {
				this.$refs.modal.showModal({
					title: '提示', // 提示标题
					content: `确认拨打 ${this.dataInfo.mobile} 吗？`, // 提示内容
					cancelText: "客服聊天", // 取消按钮的文字  
					confirmText: "确认拨打", // 确认按钮文字  
					showCancel: true, // 是否显示取消按钮，默认为 true
					confirmColor: '#FE5A1C', // 确定按钮颜色
					cancelColor: '#999', // 取消按钮颜色
					textAlign: 'center', // 对齐方式
					confirmOpenType: '', // 确定按钮open-type
					cancelOpenType: 'contact', // 取消按钮open-type
					success: res => {
						if (res.confirm) {
							if (!this.dataInfo.mobile) {
								return this.$utils.showToast('暂无客服电话')
							}
							uni.makePhoneCall({
								phoneNumber: this.dataInfo.mobile
							});
						} else {}
					}
				})
			},
			handleEvaluate() {
				if (this.evaluateList && this.evaluateList.length)
					uni.navigateTo({
						url: '/pages/goods/pages/evaluate_list?id=' + this.goodsId || this.id
					})
			},
			// 参与拼团
			handleOpenGroup(data) {
				this.currentGroup = data
				this.groupPopShow = true
			},
			// 发起拼团
			handleOpenMyGroup() {
				this.buyType = ''
				this.handleOpenGoodsWindow('buy')
			},
			handleGroup() {
				this.groupPopShow = false
				this.buyType = 'groupPick'
				this.handleOpenGoodsWindow('buy')
			},
			handleClickSwiper(index) {
				let index1 = index
				if (this.dataInfo.mainVideoUrl) {
					if (index == 0) return
					index1--
				}
				this.$utils.handlePreview(index1, this.dataInfo.rotateImagesPreviewUrlList)
			},
			showPreview(e) {
				console.log(e)
				let conimg = e.target.dataset.nodes;
				let imgs = conimg.match(/<img[^>]+>/g); //选择节点中的img
				let imgList = [];
				//遍历img标签的src里面的内容放在定义的数组imgList中
				for (var j = 0; j < imgs.length; j++) {
					imgs[j].replace(/<img[^>]*src=['"]([^'"]+)[^>]*>/gi, function(match, capture) {
						imgList.push(capture)
					})
				}
				//最后一步就是所有图片放在预览的方法previewImage中就可以了
				uni.previewImage({
					current: imgList,
					urls: imgList,
				})
			},
			handlePermis(ope, data) {
				this.$utils.permis(false).then(() => this[ope](data))
			},
			handleAddAddress() {
				this.addressPopShow = true
			}
		}
	}
</script>

<style lang="scss">
	.group_popup_container {
		.u-count-down {
			display: inline-flex;

			&__text {
				color: $primaryColor !important;
				font-size: 28rpx !important;
			}
		}
	}

	.goods_popup_container {
		.u-number-box__minus {
			width: 48rpx !important;
			border: 1rpx solid #CCCCCC !important;
			border-radius: 24rpx 0px 0px 24rpx !important;
		}

		.u-number-box__plus {
			width: 48rpx !important;
			border: 1rpx solid #CCCCCC !important;
			border-radius: 0px 24rpx 24rpx 0px !important;
		}

		.u-number-box__input {
			width: 48rpx !important;
			margin: 0 !important;
			border-top: 1rpx solid #CCCCCC;
			border-bottom: 1rpx solid #CCCCCC;
		}
	}
</style>

<style lang="scss" scoped>
	// /deep/.u-count-down__text{
	// 	color: #fff!important;
	// }
	.time_count_box {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		justify-content: left;
		align-items: center;

		text {
			margin-left: 2rpx;
		}
	}

	.commodityDIYbut {
		position: absolute;
		left: 16rpx;
		bottom: 16rpx;
		// border: 1px solid black;
		padding-left: 16rpx;
		padding-right: 16rpx;
		height: 50rpx;
		background: rgba(0, 0, 0, 0.65);
		color: #ffffff;
		display: flex;
		line-height: 50rpx;
		border-radius: 30rpx;
	}

	.goods_detail {
		img {
			max-width: 100%;
		}

		.cell {
			padding: 24rpx 32rpx;
			background: #FFFFFF;
		}

		.cell2 {
			padding: 32rpx 24rpx;
			background: #FFFFFF;
		}

		.progress {
			color: #FE0000;
		}

		.goods_img_wrap {
			.u-swiper__indicator {
				right: 0 !important;
			}

			.indicator-num {
				padding: 6rpx 10rpx;
				background: rgba(0, 0, 0, 0.65);
				border-radius: 60rpx !important;

				&__text {
					color: #FFFFFF;
					font-size: 24rpx;
				}
			}
		}

		.goods_info {
			.tag {
				position: relative;
				top: -4rpx;
			}

			.point {
				// background: rgba(234, 91, 36, 0.2);
				background: #D70000;
				line-height: 40rpx;
				position: relative;
				border-bottom-left-radius: 0;
				border-top-left-radius: 48rpx;
				margin-left: 32rpx;

				&::after {
					content: '';
					width: 0;
					height: 0;
					border: 10rpx solid;
					border-color: transparent #D70000 #D70000 transparent;

					position: absolute;
					left: -16rpx;
					bottom: 0;
				}
			}

			/deep/.u-line-progress__background {
				width: 162rpx;
				background-color: #FFC3C3;
			}

			.tip {
				top: -6rpx;
				position: relative;
				background-color: #333547;

				&::before {
					content: '';
					position: absolute;
					top: 0;
					bottom: 0;
					margin: auto 0;
					left: -24rpx;
					width: 0;
					height: 0;
					border-width: 12rpx;
					border-style: solid;
					border-color: transparent;
					border-right-color: #333547;
					z-index: 1;
				}
			}
		}

		/deep/.u-count-down__text {
			font-size: 24rpx;
		}

		.rate_wrap {
			/deep/.u-rate__content__item__icon-wrap {
				.u-icon>text {
					padding: 0 2rpx !important;
				}
			}

			.imgs_wrap {
				grid-row-gap: 18rpx;
				grid-column-gap: 18rpx;
			}

			.reply {
				background: #f8f8f8;
			}
		}

		.btn_wrap {
			padding-bottom: calc(16rpx + constant(safe-area-inset-bottom));
			padding-bottom: calc(16rpx + env(safe-area-inset-bottom));
		}

		/deep/.u-transition {
			z-index: 1000 !important;
		}

		canvas {
			position: fixed;
			z-index: -5;
			opacity: 0;
		}

		.countdown_wrap {
			/deep/.u-count-down__text {
				color: #fff !important;
			}
		}

		.act_goods_wrap {
			background: url('~@/static/images/goods_detail_bg.png');
			height: 84rpx;
			background-size: 100% 100%;
		}

		.top_countdown {
			/deep/.u-count-down__text {
				color: #fff !important;
			}
		}

		.gourp_count_down {
			/deep/.u-count-down__text {
				color: #333 !important;
			}
		}

		.square-image {
			position: absolute;
			top: 50%;
			left: 50%;
			width: calc(70.71% - 4rpx);
			height: calc(70.71% - 4rpx);
			transform: translate(-50%, -50%);
		}
	}
</style>